<template>
  <div>
    <a-form :model="dataSource" ref="timeRef" layout="horizontal">
      <a-table rowKey="id" bordered size="small" :dataSource="dataSource" :columns="addStyleColumns" :pagination="false" class="form-table mb-20" :scroll="{y: 400}" >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'styleNo'">
            <span class="text-red">*</span>{{$t('basicData.style')}}
          </template>
          <template v-if="column.key === 'production'">
            <span class="text-red">*</span>{{$t('hangManage.targetYield')}}
          </template>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'styleNo'">
            <a-form-item :name="[index, 'styleNo']">
              <a-select v-model:value="record.styleNo" allowClear :placeholder="$t('common.pleaseSelect')">
                <a-select-option v-for="(item,index) in styleList" :disabled="getDisabledOption(item.name)" :value="item.name" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </template>
          <template v-if="column.key === 'production'">
            <a-form-item :name="[index, 'production']" >
              <a-input-number v-model:value="record.production" :min="0" />
            </a-form-item>
          </template>
          <template v-else-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button type="link" class="primary-link" @click="handleAdd">{{$t('common.addNew')}}</a-button>
              <a-divider type="vertical" />
              <a-button type="link" class="warning-link" :disabled="dataSource.length === 1" @click="handleDelete(record.id)">{{$t('common.del')}}</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </a-form>
  </div>

</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import { cloneDeep } from 'lodash'
import { addStyleColumns } from './config'
import { store } from '@/store'
let props = defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => []
  },
})

const styleList = computed(() => {
  return store.state.normalData.styleList
})
let dataSource = ref([])
const timeRef = ref()
const handleAdd = () => {
  dataSource.value.push({ styleNo: undefined, production: 0, id: Math.random() })
}
const handleDelete = (id) => {
  dataSource.value = dataSource.value.filter(item => item.id !== id)
}
const getDisabledOption = (name) => {
  const selectList = dataSource.value.map(item => item.styleNo)
  return selectList.includes(name)
}
watch(()=>props.tableData, (newVal) => {
  dataSource.value = newVal.length ? cloneDeep(newVal) : [{ styleNo: undefined, production: 0, id: Math.random() }]
}, { deep: true, immediate: true })
defineExpose({
  timeRef,
  dataSource
})
onMounted(async () => {
  await store.dispatch('getStyle')
})
</script>
